<template>
  <div class="radioSelect" :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }">
    <div style="display: flex; align-items: center; height: 100%">
      <!-- 弹出层 -->
      <el-popover v-model:visible="visible" placement="bottom-start" width="150" trigger="manual" popper-class="message-popover">
        <!-- 数据列表 -->
        <ul v-if="options.length > 0" class="group">
          <li v-for="(item, index) in dataList" :key="index" class="radio" @click="select(item)">
            {{ item.label }}
          </li>
        </ul>
        <div v-else class="empty">无数据</div>

        <!-- 触发器 -->
        <template #reference>
          <div class="icon" :style="{ background: color, borderColor: color }" @click="disabled ? (visible = false) : (visible = true)">
            <i :class="activeIcon" style="color: #fff"></i>
          </div>
        </template>
      </el-popover>

      <!-- 显示当前选中项 -->
      <span class="title">
        <div>{{ activeName }}</div>
        <div><slot></slot></div>
      </span>

      <!-- 清空按钮 -->
      <div class="del">
        <i v-if="!disabled" class="el-icon-close" @click="clear"></i>
      </div>
    </div>
  </div>
</template>

<script setup name="StatusSelect" lang="ts">
import { ref, computed, watch, onMounted } from 'vue';

// 定义 props
const props = defineProps({
  value: [Number, String],
  options: {
    type: Array,
    default: () => [
      { label: '未分配', activeIcon: 'el-icon-minus', color: '#F71653', value: 0 },
      { label: '已分配', activeIcon: 'el-icon-s-claim', color: '#13ce66', value: 1 },
      { label: '进行中', activeIcon: 'el-icon-s-promotion', color: '#ffba00', value: 2 },
      { label: '已完成', activeIcon: 'el-icon-check', color: '#ff4949', value: 3 }
    ]
  },
  disabled: {
    type: Boolean,
    default: false
  },
  keyName: String,
  valueName: String,
  colorName: String,
  iconName: String
});

const emit = defineEmits(['update:value', 'change']);

// 状态
const visible = ref(false);
const activeIndex = ref(null);
const activeName = ref('--');
const activeIcon = ref('el-icon-minus');
const color = ref('#70B4E0');

// 数据列表
const dataList = computed(() =>
  props.options.map((item) => ({
    label: item[props.keyName || 'label'],
    value: item[props.valueName || 'value'],
    color: item[props.colorName || 'color'],
    activeIcon: item[props.iconName || 'activeIcon']
  }))
);

// 选择项
const select = (data) => {
  activeIndex.value = data.value;
  activeName.value = data.label;
  color.value = data.color;
  activeIcon.value = data.activeIcon;
  emit('update:value', data.value);
  visible.value = false;

  if (props.value !== data.value) {
    emit('change', data.value);
  }
};

// 清空操作
const clear = () => {
  select({
    value: null,
    label: '--',
    color: '#70B4E0',
    activeIcon: 'el-icon-minus'
  });
};

// 监听 value 变化并同步选中状态
watch(
  () => props.value,
  (val) => {
    const selected = dataList.value.find((item) => item.value === val);
    if (selected) select(selected);
  },
  { immediate: true }
);

// 点击外部关闭弹出层
onMounted(() => {
  document.addEventListener('mouseup', (e) => {
    const dom1 = document.querySelector('.radioSelect');
    if (dom1 && !dom1.contains(e.target)) {
      visible.value = false;
    }
  });
});
</script>

<style>
.message-popover {
  padding: 0 !important;
}
</style>

<style lang="scss" scoped>
.radioSelect {
  cursor: pointer;
  user-select: none;
  height: 50px;
  display: flex;
  align-items: center;

  .icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      font-size: 20px;
    }
  }

  .title {
    user-select: none;
    color: #aaa;
    width: 70px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:first-of-type {
        color: #666;
        font-size: 16px;
      }

      &:last-of-type {
        color: #999;
        font-size: 12px;
      }
    }
  }

  .del {
    width: 20px;
    height: 100%;
    display: flex;
    align-items: center;

    .el-icon-close {
      visibility: hidden;
    }
  }

  &:hover .el-icon-close {
    visibility: visible;

    &:hover {
      color: red;
    }
  }

  .group ::v-deep {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow: auto;

    .radio {
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 35px;
      line-height: 35px;
      padding: 0 10px;
      box-sizing: border-box;

      &:hover {
        background: #eee;
      }
    }
  }

  .empty {
    text-align: center;
  }
}
</style>
